.shezhi {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgb(8, 9, 4);
    z-index: 100;
    animation: yidong;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    .shezhi-shang {
        width: 90%;
        height: 50px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
            color: #fff;
            font-size: 20px;
        }
        span {
            color: #fff;
        }
    }
    .shezhi-zhong {
        width: 80%;
        height: calc(100% - 110px);
        margin: 0 auto;
        li {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            p {
                font-size: 20px;
                color: #fff;
            }
            img {
                width: 30px;
                height: 30px;
                border-radius: 15px;
            }
        }
    }
    .shezhi-xia {
        width: 90%;
        height: 60px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        button {
            width: 90%;
            height: 40px;
            border: none;
            outline: none;
            background: rgb(245, 171, 54);
            font-size: 15px;
            color: #fff;
            border-radius: 20px;
        }
    }
    .youxiang {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(255, 255, 255, 0.2);
        .youxiang-zhong {
            width: 100vw;
            height: 200px;
            position: fixed;
            bottom: 0;
            left: 0;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            background: #fff;
            animation: weiyi;
            animation-duration: 0.2s;
            animation-timing-function: linear;
            .youxiang-shang {
                width: 90%;
                height: 50px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                p {
                    font-size: 20px;
                    color: blue;
                }
            }
            .youxiang-xia {
                width: 100%;
                height: 150px;
                background: #fff;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                > input {
                    width: 80%;
                    height: 40px;
                    border: none;
                    outline: none;
                    border: 1px solid #000;
                    border-radius: 20px;
                    text-indent: 1em;
                    font-size: 18px;
                }
                > div {
                    width: 80%;
                    height: 40px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    input {
                        width: 60%;
                        height: 36px;
                        border: none;
                        outline: none;
                        border: 1px solid #000;
                        border-radius: 20px;
                        text-indent: 1em;
                        font-size: 18px;
                    }
                    div {
                        width: 35%;
                        height: 40px;
                        border-radius: 5px;
                        background: rgb(244, 244, 244);
                        text-align: center;
                        line-height: 40px;
                        font-size: 20px;
                        color: yellowgreen;
                    }
                }
                button {
                    width: 80%;
                    height: 40px;
                    border: none;
                    outline: none;
                    border-radius: 20px;
                    background: rgb(3, 187, 122);
                    font-size: 18px;
                    color: yellowgreen;
                }
            }
        }
    }
}
@keyframes weiyi {
    0% {
        transform: translate(0, 40vh);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes yidong {
    0% {
        transform: translate(100vw, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
